<template>
  <div class="rich_content sharePG">
    <div v-if="isPainter" class="poster">
      <img :src="shareImg" class="posterImg" />
    </div>
    <button v-if="isPainter" class="start animateded animate__bounceIn" open-type='share'>
      <div class="start-btn">邀请好友一起来换装</div>
    </button>
    <div v-if="!isPainter" style="position:absolute;top: -9999px;left: -9999px;z-index:-99;">
      <painter :customStyle="customStyle"  widthPixels="0" @imgOK="onImgOk" :palette="template" />
    </div>
  </div>
</template>

<script>

import {API} from "../../api";
import {hideLoading, showLoading} from "../../api/wechat";
import {showToast} from "../../utils";
const customStyle = 'margin:0;padding:0px;'
export default {
  data () {
    return {
      isPainter:false,
      shareImg: '',
      customStyle: customStyle,
      template: {}
    }
  },

  components: {
  },
  mounted() {
    let _this = this;
    _this.shareImg = ''
    _this.isPainter = false
    _this.template = {};
    _this.contentId = this.$route.query.contentId || 0;
    _this.picId = this.$route.query.picId || 0;
    showLoading({title:"加载中"});
    API.getPainterInfo({contentId:_this.contentId,picId:_this.picId}).then( res => {
      if(res.code == 200){
        showLoading({title:" 海报生成中..."});
        _this.template = res.data;
      }else {
        hideLoading();
        showToast("海报数据获取为空");
      }
    });
  },

  methods: {
    onImgOk (e) {
      hideLoading()
      this.isPainter = true
      this.shareImg = e.mp.detail.path
      wx.saveImageToPhotosAlbum({
        filePath: e.mp.detail.path, //要保存到相册的图片信息
        success(res) {
          showToast('保存成功',true)
        }
      })
    }
  },

  created () {

  }
}
</script>

<style scoped>
.sharePG{
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(0deg,rgba(250,181,174,1) 0%,rgba(252,197,200,1) 100%);

}
.sharePG .poster{
  width: 80%;
  height: 70%;
  margin: 10% auto;
  /*box-shadow: 0px 0px 10px 5px rgba(92,211,236,0.9);*/
  box-shadow: 0px 0px 9px 1.5px rgba(0,0,0,0.3);

}
.sharePG .poster .posterImg{
  width: 100%;
  height: 100%;
}
.start{
  color: #fff;
  position: absolute;
  bottom: 4%;
  width: 60%;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  height: 50px;
  text-align: center;
  background-color: #fcacf5;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.start .start-btn{
  background-color: #ff9096;
  border-radius: 7px;
  width: 92%;
  height: 77%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  font-size: 20px;
  font-weight: bold;
}
.animateded {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}





</style>
